<template>
    <div class="author">
        <div class="author-list">
            <van-index-bar :index-list="indexList" :sticky="false">
                <template v-for="(list, index) in authorList" :key="index">
                    <van-index-anchor :index="index">{{ index }}</van-index-anchor>
                    <van-cell :title="item.a_name" v-for="item in list" :key="item.did" @click="goToAuthorDetail(item.author_id)"/>
                </template>
            </van-index-bar>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from "@/router"
import { onMounted, ref } from "vue"
import findStore from '../find.store'

const findSe = findStore()
// const indexList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

const goToAuthorDetail = (val: string) => {
    router.push({ 
        name: 'authorDetail',
        params: {
            authorId: val
        }
    })
}
let authorList = ref<any>([])
let indexList = ref<any>([])
const getAuthor = () => {
    findSe.getAuthor().then((res: any) => {
        if(res.status == 'success') {
            authorList.value = res.results
            for(let index in res.results) {
                indexList.value.push(index)
            }
        }
    })
}
onMounted(() => {
    getAuthor()
})
</script>

<style lang="less" scoped>
.author {
    width: 100vw;
    background-color: var(--bg-color-gray);
    .author-list {
        position: relative;
        background-color: var(--bg-color-gray);
        height: calc(100vh - 6rem);
        overflow: auto;
        :deep(.van-index-bar__sidebar) {
            .van-index-bar__index {
                height: 1.8rem;
                font-size: 14px;
                color: var(--font-color-red);
            }
        }
        :deep(.van-index-anchor) {
            color: var(--font-color-red);
        }
        :deep(.van-cell__title) {
            color: var(--font-color-black);
            span {
                color: var(--font-color-black);
            }
        }
    }
}
</style>